<template>
  <div class="user_alter">
    <van-nav-bar title="登录 / 注册" left-arrow @click-left="$router.back()" />
    <input
      type="file"
      hidden
      ref="file"
      accept="image/*"
      @change="onFileChange"
    />
    <van-cell title="头像" is-link center>
      <van-image
        width="40px"
        height="40px"
        round
        fit="cover"
        :src="userProfile.photo"
        @click="$refs.file.click()"
      ></van-image>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="userProfile.name"
      @click="isEditNameShow = true"
    ></van-cell>
    <van-cell
      title="性别"
      is-link
      :value="userProfile.gender === '0' ? '男' : '女'"
      @click="isEditGenderShow = true"
    ></van-cell>
    <van-cell
      title="年龄"
      is-link
      :value="userProfile.birthday"
      @click="isEditAgeShow = true"
    ></van-cell>
    <!-- 昵称 弹出层 -->
    <van-popup
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <edite-name
        :name="userProfile.name"
        @close="isEditNameShow = false"
      ></edite-name>
    </van-popup>
    <!-- 性别 弹出层 -->
    <van-popup
      v-model="isEditGenderShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <edit-gender
        :defaultIndex="userProfile.gender"
        @closeGender="isEditGenderShow = false"
      ></edit-gender>
    </van-popup>
    <!-- 年龄 弹出层 -->
    <van-popup
      v-model="isEditAgeShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <edit-age
        :date="userProfile.birthday"
        @onCancel="isEditAgeShow = false"
      ></edit-age>
    </van-popup>
    <!-- 图片 弹出层 -->
    <van-popup
      v-model="isEditImgShow"
      position="bottom"
      :style="{ height: '100%' }"
      class="a"
    >
      <edit-img
        :blobObj="blobObj"
        class="a"
        @handleUpdatePhoto="userProfile.photo = this.imagePath"
        @close="isEditImgShow = false"
        @handlePoptot="handlePoptot"
      ></edit-img>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from "@/request/home";
import editeName from "./components/edidName";
import editGender from "./components/editGender";
import editAge from "./components/editAge";
import editImg from "./components/editImg";

export default {
  name: "userAlter",
  data() {
    return {
      userProfile: {},
      isEditNameShow: false,
      isEditGenderShow: false,
      isEditAgeShow: false,
      isEditImgShow: false,
      blobObj: null
    };
  },
  components: {
    editeName,
    editGender,
    editAge,
    editImg
  },
  created() {
    this._getUserProfile();
  },
  methods: {
    async _getUserProfile() {
      const { data } = await getUserProfile();
      this.userProfile = data.data;
      // console.log(this.userProfile);
    },
    onFileChange(v) {
      // 获取文件对象
      // const file = this.$refs.file.files[0];
      // 可以用于在浏览器上预览本地图片或者视频
      // this.blob = window.URL.createObjectURL(file);

      this.blobObj = this.$refs.file.files;

      this.isEditImgShow = true;
      // 清除上一张图片
      this.$refs.file.values = "";
    },
    handlePoptot(v) {
      console.log(v);
      this.userProfile.photo = v;
    }
  }
};
</script>

<style lang="less" scoped>
.user_alter {
  .van-nav-bar {
    background-color: #3295fd;
    /deep/.van-nav-bar__content {
      .van-icon {
        color: white;
      }
      .van-nav-bar__title {
        color: white;
      }
    }
  }
  // .van-popup {
  //   background-color: black;
  // }
}
</style>